<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css" />
		<style>
			html,body {
				background-color: #efeff4;
			}

			.mui-table-view:before{
				/*0px;*/
			}
			.mui-table-view:after{
				/*0px;*/
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav white">
			<h1 class="mui-title">通讯录</h1> 
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="imageView">图片预览</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="sjbd">事件绑定</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="dsffx">第三方分享</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="dsfdl">第三方登录</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="dsfzf">第三方支付</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="cyhsj">差异化升级</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="ewmsc">二维码生成</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="readQrcode">二维码扫描</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="geolocation">定位</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="map">map</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="register">注册登录绑定第三方</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="reptile">Node.js爬虫</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="vue">Vue</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="maps">Maps</a>
				</li>
				<li class="mui-table-view-cell"> 
					<a class="mui-navigate-right" id="huancun">缓存</a>
				</li>
			</ul>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		// 图片预览
		document.getElementById('imageView').addEventListener('tap',function(){
			mui.openWindow({
				url:"imageView.html",
				id:"imageView.html",
			})
		})
		// 事件绑定
		document.getElementById('sjbd').addEventListener('tap',function(){
			var animationType = "zoom-out";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"shijian.html",
				id:"shijian.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})
		// 第三方分享
		document.getElementById('dsffx').addEventListener('tap',function(){
			var animationType = "zoom-out";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"share.html",
				id:"share.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})
		// 第三方登录
		document.getElementById('dsfdl').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"login.html",
				id:"login.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})
		// 第三方支付
		document.getElementById('dsfzf').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"pay.html",
				id:"pay.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})
		// 差异化升级
		document.getElementById('cyhsj').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"update.html",
				id:"update.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// 二维码生成
		document.getElementById('ewmsc').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"qrcode.html",
				id:"qrcode.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// 位置
		document.getElementById('geolocation').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"geolocation.html",
				id:"geolocation.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  	
		// map
		document.getElementById('map').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"map.html",
				id:"map.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  	
		// 二维码扫描
		document.getElementById('readQrcode').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"readQrcode.html",
				id:"readQrcode.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// 注册登录绑定第三方
		document.getElementById('register').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"register.html",
				id:"register.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// Node.js爬虫
		document.getElementById('reptile').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"reptile.html",
				id:"reptile.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// Vue
		document.getElementById('vue').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"vue.html",
				id:"vue.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// Maps
		document.getElementById('maps').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"Maps.html",
				id:"Maps.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
		// 缓存
		document.getElementById('huancun').addEventListener('tap',function(){
			var animationType = "slide-in-right";//页面显示动画，默认为”slide-in-right“；
			var animationTime = 100; //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200
			mui.openWindow({
				url:"huancun.html",
				id:"huancun.html",
				show:{
					autoShow:true,//页面loaded事件发生后自动显示，默认为true
      				aniShow:animationType,
     				duration:animationTime,
				},
			})
		})  
	</script>
</html>